<template>
  <div>
    <!-- 用户关注与粉丝,等级 -->
    <div class="follow">
      <header>
        <h3 v-show="options == 0">关注</h3>
        <h3 v-show="options == 1">粉丝</h3>
        <h3 v-if="options == 2">当前等级:Lv.{{ grade.level }}</h3>
      </header>
      <main>
        <ul v-if="follow">
          <li v-for="ele in follow" :key="ele.userId">
            <div class="imgbox">
              <img :src="ele.avatarUrl" alt="" />
            </div>
            <div>
              <h6>{{ ele.nickname }}</h6>
            </div>
          </li>
        </ul>
        <van-empty
          description="空"
          v-show="options !== 2 && follow.length == 0"
        />
      </main>
      <span
        class="iconfont icon-fangxianganniu1"
        @click="$router.go(-1)"
      ></span>
    </div>

    <!-- ech -->
    <div v-if="grade" class="schedule">
      <div>
        <van-progress
          :pivot-text="String(grade.level)"
          color="#ee0a24"
          track-color="#ccc"
          :percentage="grade.progress * 100"
        />
      </div>
      <div class="privilege">
        <h5>当前等级特权</h5>
        <p>{{ grade.info | filters_spl }}</p>
      </div>
      <h3 class="gap">距离下一个等级</h3>
      <div
        id="main"
        style="width: 400px; height: 350px; backgroundcolor: 'pink'"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["follow", "options", "grade"],
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 295, name: "已满" },
              { value: 600, name: "还差" },
            ],
          },
        ],
      },
    };
  },
  filters: {
    filters_spl(val) {
      if(val){
          return val.split("$").join(",");
      }
    },
  },
  watch: {
    grade: {
      immediate: true,
      
      handler(newval) {
        if (newval !== undefined) {
          this.option.series[0].data[0].value = newval.nextPlayCount;
          this.option.series[0].data[1].value = newval.nextPlayCount;
        }else{
            return 
        }
      },
    },
  },
  mounted() {
   if(this.grade){
        var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    myChart.setOption(this.option);
   }
  },
};
</script>

<style lang="less" scoped>
.follow {
  position: relative;
  padding: 40px 16px 0 16px;
  span {
    font-size: 22px;
    position: absolute;
    left: 16px;
    top: 14px;
    font-weight: bold;
  }
}
header {
  h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 36px;
  }
}
main {
  li {
    box-sizing: border-box;
    height: 68px;
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    .imgbox {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h6 {
      padding: 16px 0 16px 10px;
    }
  }
}
.privilege {
  height: 94px;
  padding: 20px 10px;
  h5 {
    margin-bottom: 15px;
    font-size: 14px;
  }
  p {
    font-size: 14px;
    color: #ccc;
  }
}
.gap {
  padding: 0 8px;
}
</style>